<!--
 * @Author: hifishroom
 * @Date: 2021-09-01 09:54:43
 * @LastEditTime: 2021-09-06 11:22:12
 * @FilePath: \backstage\src\views\background\childsContent\dictionaries\DictionariesView.vue
-->
<template>
  <div>
    <div>
      <el-select
        v-model="select"
        slot="prepend"
        placeholder="请选择"
        @change="sreachClick($event)"
      >
        <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.label"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <el-button
        slot="append"
        icon="el-icon-search"
        class="sreach-btn"
      ></el-button>
    </div>
    <div>
      <el-button type="primary" @click="dialog = true">添加</el-button>
    </div>
    <el-drawer
      title="添加类型"
      :before-close="handleClose"
      :visible.sync="dialog"
      direction="rtl"
      custom-class="demo-drawer"
      ref="drawer"
      size="280px"
      :modal="false"
      :show-close="false"
    >
      <div class="demo-drawer__content">
        <el-form :model="form">
          <el-form-item label="类型" :label-width="formLabelWidth">
            <el-select v-model="form.region" placeholder="请选择具体类型">
              <el-option label="座落类型" value="1"></el-option>
              <el-option label="环境类型" value="2"></el-option>
              <el-option label="仓储类型" value="3"></el-option>
              <el-option label="工程类型" value="4"></el-option>
              <el-option label="遗留问题类型" value="5"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="类型名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer flex">
          <el-button @click="cancelForm" class="flex-grow">取 消</el-button>
          <el-button
            type="primary"
            @click="$refs.drawer.closeDrawer()"
            class="flex-grow"
            :loading="loading"
            >{{ loading ? "提交中 ..." : "确 定" }}</el-button
          >
        </div>
      </div>
    </el-drawer>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column type="selection" width="100%"> </el-table-column>
      <el-table-column fixed prop="id" label="ID" width="300%">
      </el-table-column>
      <el-table-column prop="dictionaryName" label="类型" width="400%">
      </el-table-column>
      <el-table-column prop="typeName" label="名称" width="400%">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="250%">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >查看</el-button
          >
          <el-button
            type="text"
            size="small"
            @click.native.prevent="deleteRow(scope.$index, tableData)"
            >移除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="len"
      @current-change="sizeChange"
    >
    </el-pagination>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  name: "DictionariesView",
  data() {
    return {
      value: "",
      select: "",
      options: [
        {
          id: 1,
          value: "座落类型",
          label: "座落类型"
        },
        {
          id: 2,
          value: "环境类型",
          label: "环境类型"
        },
        {
          id: 3,
          value: "仓储类型",
          label: "仓储类型"
        },
        {
          id: 4,
          value: "工程类型",
          label: "工程类型"
        },
        {
          id: 5,
          value: "遗留问题类型",
          label: "遗留问题类型"
        }
      ],
      dialog: false,
      loading: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      formLabelWidth: "80px",
      timer: null,
      multipleSelection: [],
      page: 1
    };
  },
  computed: {
    tableData() {
      return this.$store.state.DictionaryList;
    },
    len() {
      return this.$store.state.DictionaryItemLen;
    }
  },
  mounted() {
    this.dictionariesList(this.page);
  },
  methods: {
    ...mapActions([
      "dictionariesSearch",
      "dictionariesList",
      "dictionariesAddText"
    ]),
    sreachClick(id) {
      this.dictionariesSearch(id);
    },
    handleClose(done) {
      if (this.loading) {
        return;
      }
      this.$confirm("确定提交吗？")
        .then(_ => {
          this.loading = true;
          this.timer = setTimeout(() => {
            done();
            // 动画关闭需要一定的时间
            setTimeout(() => {
              this.loading = false;
              this.dictionariesAddText({
                dictionaryId: this.form.region,
                name: this.form.name
              });
            }, 400);
          }, 2000);
        })
        .catch(_ => {});
    },
    cancelForm() {
      this.loading = false;
      this.dialog = false;
      clearTimeout(this.timer);
    },
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    sizeChange(val) {
      this.page = val;
      this.dictionariesList(this.page);
    }
  }
};
</script>

<style lang="scss">
.el-input__inner {
  border-radius: 0;
}

.sreach-btn {
  border-radius: 0;
  color: #409eff;
}

.el-drawer__body {
  padding: 20px;
}

.demo-drawer__content {
  display: flex;
  flex-direction: column;
  height: 100%;
}
</style>
